<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>心理咨询师筛选平台</title>
  <style>
    body {
      font-family: 'Helvetica Neue', sans-serif;
      background-color: #f9f9f9;
      color: #333;
      margin: 0;
      padding: 0;
    }

    h1 {
      text-align: center;
      color: #2c3e50;
      margin: 20px 0;
      font-size: 2em;
    }

    .filter-container {
      max-width: 720px;
      margin: 0 auto 30px auto;
      padding: 0 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
    }

    .filter-container label {
      display: none;
    }

    .filter-container select,
    .filter-container input[type="text"] {
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 14px;
      background: #fff;
      width: 140px;
      flex: none;
    }

    #consultants {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 16px 40px 16px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .consultant {
      background-color: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 16px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      display: flex;
      gap: 16px;
      align-items: center;
    }

    .consultant img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }

    .consultant-details {
      flex-grow: 1;
    }

    .consultant strong {
      font-size: 18px;
      color: #333;
    }

    .consultant p {
      margin: 4px 0;
      font-size: 14px;
      color: #666;
      line-height: 1.5;
    }

    @media (max-width: 480px) {
      .filter-container {
        flex-direction: column;
        align-items: stretch;
      }

      .filter-container select,
      .filter-container input[type="text"] {
        width: 100%;
      }

      .consultant {
        flex-direction: column;
        align-items: flex-start;
      }

      .consultant img {
        margin-bottom: 10px;
      }

      .consultant-details {
        width: 100%;
      }
    }
  </style>
</head>
<body>

<h1>心理咨询师筛选平台</h1>

<div class="filter-container">
  <select id="filterCity" onchange="filter()">
    <option value="all">城市：全部</option>
    <option value="shanghai">上海</option>
    <option value="beijing">北京</option>
  </select>

  <select id="filterGender" onchange="filter()">
    <option value="all">性别：全部</option>
    <option value="male">男性</option>
    <option value="female">女性</option>
  </select>

  <select id="filterType" onchange="filter()">
    <option value="all">咨询类型：全部</option>
    <option value="adult">成人</option>
    <option value="teen">青少年</option>
    <option value="family">家庭</option>
    <option value="couple">伴侣</option>
    <option value="lgbt">性少数</option>
  </select>

  <select id="filterIssue" onchange="filter()">
    <option value="all">困扰：全部</option>
    <option value="relationship">婚姻恋爱</option>
    <option value="self">自我成长</option>
    <option value="family_origin">原生家庭</option>
  </select>

  <input type="text" id="searchInput" placeholder="关键词..." oninput="filter()" />
</div>

<div id="consultants">

  <div class="consultant" 
       data-city="shanghai" 
       data-gender="female" 
       data-type="adult,teen" 
       data-issue="relationship,self">
    <img src="https://via.placeholder.com/80" alt="张老师头像">
    <div class="consultant-details">
      <strong>张老师</strong>（女，上海）
      <p>擅长：成人、青少年</p>
      <p>议题：婚姻恋爱、自我成长</p>
    </div>
  </div>

  <div class="consultant" 
       data-city="beijing" 
       data-gender="male" 
       data-type="family,couple" 
       data-issue="family_origin">
    <img src="https://via.placeholder.com/80" alt="李老师头像">
    <div class="consultant-details">
      <strong>李老师</strong>（男，北京）
      <p>擅长：家庭、伴侣</p>
      <p>议题：原生家庭</p>
    </div>
  </div>

  <div class="consultant" 
       data-city="shanghai" 
       data-gender="male" 
       data-type="lgbt" 
       data-issue="self">
    <img src="https://via.placeholder.com/80" alt="王老师头像">
    <div class="consultant-details">
      <strong>王老师</strong>（男，上海）
      <p>擅长：性少数</p>
      <p>议题：自我成长</p>
    </div>
  </div>

</div>

<script>
function filter() {
  const city = document.getElementById("filterCity").value;
  const gender = document.getElementById("filterGender").value;
  const type = document.getElementById("filterType").value;
  const issue = document.getElementById("filterIssue").value;
  const keyword = document.getElementById("searchInput").value.trim().toLowerCase();

  const consultants = document.querySelectorAll(".consultant");

  consultants.forEach(c => {
    const cCity = c.getAttribute("data-city");
    const cGender = c.getAttribute("data-gender");
    const cTypes = c.getAttribute("data-type").split(",");
    const cIssues = c.getAttribute("data-issue").split(",");
    const content = c.innerText.toLowerCase();

    const matchCity = (city === "all" || cCity === city);
    const matchGender = (gender === "all" || cGender === gender);
    const matchType = (type === "all" || cTypes.includes(type));
    const matchIssue = (issue === "all" || cIssues.includes(issue));
    const matchKeyword = (keyword === "" || content.includes(keyword));

    if (matchCity && matchGender && matchType && matchIssue && matchKeyword) {
      c.style.display = "flex";
    } else {
      c.style.display = "none";
    }
  });
}
</script>

</body>
</html>
